<property name="requestContextAttribute" value="request"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表格</title>
    <link rel="icon" href="${request.contextPath}/image/code.png">
    <link rel="stylesheet" href="${request.contextPath}/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="${request.contextPath}/css/global.css" media="all">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link href="${request.contextPath}/dataTables/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="${request.contextPath}/dataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="${request.contextPath}/bootstrap/css/bootstrap.css">
    <style type="text/css">
		@font-face {
		  font-family: 'Glyphicons Halflings';
		  src: url('${request.contextPath}/fonts/glyphicons-halflings-regular.eot');
		  src: url('${request.contextPath}/ui/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('${request.contextPath}/fonts/glyphicons-halflings-regular.woff') format('woff'), url('${request.contextPath}/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('${request.contextPath}/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
		}
		
		*{
			font-family: "Helvetica Neue",Helvetica,STheiti,微软雅黑,宋体,Arial,Tahoma,sans-serif,serif;
			font-size: 13px;
		}
    
    	body{
    		/*background: #E9E9E9;*/
    		color: #000;
			font-size: 13px;
			margin:0px;
    		padding:0px;
    	}
    	
    	.hm-btn{
    		border:0px;
    		color:blue;
    	}
    </style>
</head>
<body>

<div class="admin-main" style="overflow-x:hidden;">
	<blockquote class="layui-elem-quote">
		<p style="color:#23527C;"><span style="font-size: 14px;padding-right: 10px;color:black;">说明:</span>略。</p>
	</blockquote>
	
	<div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>搜索条件</legend>
		</fieldset>
		<form>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-block">
						<select class="layui-input" style="width:180px;" id="dictType">
							<option value="">---请选择---</option>
							<#list dictTypes as type>
                        		<option value="${type.status}">${type.desc}</option>
                        	</#list>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="code" lay-verify="code" autocomplete="off" class="layui-input" id="code">
					</div>
				</div>
				<div class="layui-inline">
					<a href="javascript:;" class="layui-btn layui-btn-small" id="search"><i class="layui-icon">&#xe615;</i> 搜索 </a>
				</div>
			</div>
		</form>
	 </div>
	
	<fieldset class="layui-elem-field">
		<legend>数据列表</legend>
		<div class="layui-field-box layui-form">
			<table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
			    <thead>
			    <tr>
			        <th>ID</th>
			        <th>序号</th>
			        <th>类型</th>
			        <th>CODE</th>
			        <th>值</th>
			        <th>描述</th>
			        <th>排序</th>
			    </tr>
			    </thead>
			</table>
		</div>
	</fieldset>
</div>

<script src="${request.contextPath}/dataTables/js/jquery-1.12.4.js"></script>
<script src="${request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/dataTables/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/dataTables/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/plugins/layui/layui.js"></script>
<script src="${request.contextPath}/js/long2date.js"></script>
<script type="text/javascript">
    $(function () {
        //提示信息
        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        var table = $("#example").dataTable({
            language:lang,  //提示信息
    		bLengthChange:false,//去掉每页多少条框体
            autoWidth: false,  //禁用自动调整列宽
            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,  //启用服务器端分页
            searching: false,  //禁用原生搜索
            orderMulti: false,  //启用多列排序
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
            pagingType: "full_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
            columnDefs: [{
                "targets": 'nosort',  //列的样式名
                "orderable": false    //包含上样式名‘nosort’的禁止排序
            }],
            ajax: function (data, callback, settings) {
                //封装请求参数
                var param = {};
                param.code=$('#code').val();
                param.dictType=$("#dictType option:selected").val();
                param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.page = (data.start / data.length)+1;//当前页码
                //console.log(param);
                //ajax请求数据
                $.ajax({
                    type: "GET",
                    url: "${request.contextPath}/mg/dict/query.do",
                    cache: false,  //禁用缓存
                    data: param,  //传入组装的参数
                    dataType: "json",
                    success: function (result) {
                       var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.totalSize;//返回数据全部记录
                        returnData.recordsFiltered = result.totalPage;//后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result.content;//返回的数据列表
                        //console.log(returnData);
                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }
                });
            },
            //列表表头字段
            columns: [
                { "data": "id","visible": false },
                {"data":"index",//序号
					"render":function(data,type,row,meta){
				 		var startIndex = meta.settings._iDisplayStart;
						return startIndex+meta.row+1;
				}},
                { "data": "dictType" },
                { "data": "code" },
                { "data": "comment" },
                { "data": "value" },
                { "data": "level" }
            ]
        }).api();
        
        $('#search').click(function(e){
            table.ajax.reload();
        });
    });
	
	function deleteData(id){
		layui.use(['form', 'layer'], function () {
        	var $ = layui.jquery,form = layui.form(),layer = layui.layer;
        	layer.confirm('确定要删除该条记录？', {
			  btn: ['删除','取消']
			}, function(){
			  window.location.href='${request.contextPath}/mg/role/deleteRole.do?id='+id;
			});
        });
	}
</script>
</body>
</html>